<template>
  <div >
    <div class="body-center-b">
    <div class="body-center-chart-title">
      <dv-decoration-11 class="t">今日体温情况图</dv-decoration-11>
    </div>
    <dv-active-ring-chart :config="option" style="width:300px;height:300px; margin: 10px auto;" />
    </div>
    <div class="all-count">
      <dv-border-box-10>
        <div style="margin-top:8px; overflow:hidden;">
          <dv-decoration-7 style="width: 90%; margin: 20px auto;height:30px;font-size:25px;">今日体温监控信息</dv-decoration-7>
          <dv-capsule-chart :config="optionn" style="width: 90%; margin: 20px auto;" />
          <div class="jinri">
            
            <dv-conical-column-chart :config="optionnn" style="width: 90%; margin: 20px auto;height:240px;" />
          </div>
        </div>
      
      </dv-border-box-10>      
    </div>
  </div>
</template>

<script>
export default {
  name: 'CenterChart',
  data () {
    return {
      option: {
        color: ['#9fe6b8', '#fb7293'],
        data: [
          {
            name: '正常体温',
            value: 55
          },
          {
            name: '异常体温',
            value: 120
          }
        ]
      },
      optionn: {
        colors: ['#37a2da', '#9fe6b8'],
        data: [
          {
            name: '总测温人数',
            value: 3200
          },
          {
            name: '今日测温人数',
            value: 1200
          }
        ],
        showValue: true
      },
      optionnn: {
        img: [require('../../assets/img/tiwen.png'), require('../../assets/img/tiwen1.png')],
        data: [
          {
            name: '总测温人数',
            value: 3200
          },
          {
            name: '今日测温人数',
            value: 1200
          }
        ],
        fontSize: 20,
        showValue: true
      }
    }
  },
  methods: {
    createData () {
      const { randomExtend } = this
    },
    randomExtend (minNum, maxNum) {
      if (arguments.length === 1) {
        return parseInt(Math.random() * minNum + 1, 10)
      } else {
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
      }
    }
  },
  mounted () {
    const { createData } = this

    createData()

    setInterval(createData, 30000)
  }
};
</script>

<style lang="less">
.all-count{
  background-color: rgba(6, 30, 93, 0.5);
  margin-top: 10px;
}
.all-count .dv-capsule-chart .capsule-item .capsule-item-column, .all-count .dv-capsule-chart .capsule-item{ height:25px;}
.all-count .dv-capsule-chart .label-column div{ font-size:20px; line-height:45px; height:45px;}
.all-count .dv-capsule-chart .label-column div:nth-child(2){ font-size:20px; line-height:60px; height:45px;}
.body-center-b {
  width: 100%;
  height: 40%;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, .5);
  box-sizing: border-box;

  .rose-chart-title {
    height: 50px;
    font-weight: bold;
    text-indent: 20px;
    font-size: 20px;
    display: flex;
    align-items: center;
  }

  .dv-charts-container {
    height: calc(~"100% - 50px");
  }
}
.body-center-chart-title{
  color: #19c3eb;
  line-height: 40px;
  font-size:16px;
  text-align: center;
  margin-top: 20px;
}
.body-center-chart-title .t{margin: 0 auto;}
</style>
